<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>debounce</title>
</head>
<input type="text" id="inp">

<body>
    <script>

        function debounce(fn, time) {
            var tim
            return function () {
                clearTimeout(tim)
                tim = setTimeout(() => {
                    fn.apply(this, arguments)
                }, time)
            }
        }
        document.getElementById('inp').addEventListener('input', debounce(() => {
            console.log("触发一次");
        }, 1000))
        function throttle(fn, time) {
            let canRun = true
            return function () {
                if (!canRun) return
                canRun = false
                fn.apply(this, arguments)
                setTimeout(() => {
                    canRun = true
                }, time);
            }
        }
        document.getElementById('inp').addEventListener('input', throttle(() => {
            console.log("触发一次");
        }, 1000))
        document.querySelector("#inp").addEventListener("input", debounce(() => { console.log("111") }, 1000))
        //querySelector通过选择器获取元素
        
    </script>
</body>

</html>